<!-- 对阿里图标库 Symbol 方式使用图标的封装 -->

<script setup lang="ts">
const props = defineProps<{
  // 图标名称
  iconName: string
}>()

// 通过 ref 获取 use 元素
const iconComponentUseEl = ref<SVGUseElement | null>(null)

/**
 * 根据传递给组件的图标名称，设置图标
 */
const setIcon = () => {
  const useEl = iconComponentUseEl.value as SVGUseElement
  useEl.href.baseVal = `#${props.iconName}`
}

// 组件挂载后，设置图标
onMounted(() => {
  setIcon()
})
</script>

<template>
  <svg class="icon" aria-hidden="true">
    <use ref="iconComponentUseEl" xlink:href="#icon-xxx"></use>
  </svg>
</template>

<style scoped>

</style>
